<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">添加个人计划</view>
		</view>
		<view class="main-content">
			<view class="plan-form">
				<view class="plan-name-box">
					<view class="text">计划名称：</view>
					<input type="text" maxlength="30" v-model="name" />
				</view>
				<view class="plan-description">
					<view class="text">计划描述：</view>
					<textarea v-model="description" placeholder="请输入内容" maxlength="140"></textarea>
				</view>
				<view class="plan-count">
					<view class="text">总打卡次数：</view>
					<input type="text" maxlength="30" v-model="count" />
				</view>
			</view>
			<view class="bottom-btn" @click="addPlan">添加计划</view>
		</view>
	</view>
</template>

<script>
import { plan } from '../../server/plan.js';

let lock = false;

export default {
	data() {
		return {
			name: '',
			description: '',
			count:'',
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		},
		async addPlan() {
			if (lock) { return ; }
			lock = true;
			if (!this.name) {
				uni.showToast({
					title: '计划名称不为空',
					icon: 'error'
				});
				lock = false;
				return ;
			}
			if (!this.description) {
				uni.showToast({
					title: '计划描述不为空',
					icon: 'error'
				});
				lock = false;
				return ;
			}
			if (!this.count) {
				uni.showToast({
					title: '请填写计划打卡次数',
					icon: 'error'
				});
				lock = false;
				return ;
			}
			try {
				this.count = parseInt(this.count);
				if (isNaN(this.count)) {
					uni.showToast({
						title: '计划打卡次数输入格式不正确',
						icon: 'error'
					});
					lock = false;
					return ;
				}
			} catch (err) {
				uni.showToast({
					title: '计划打卡次数输入格式不正确',
					icon: 'error'
				});
				lock = false;
				return ;
			}
			plan.addPlan(this.name, this.description, this.count).then((res) => {
				if (res.success) {
					uni.showToast({
						title: res.msg,
						duration: 1000
					});
					setTimeout(() => {
						lock = false;
						uni.navigateBack();
					}, 1000);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					setTimeout(() => {
						lock = false;
					}, 1000);
				}
			}).catch((err) => {
				uni.showToast({
					title: '请检查网络',
					icon: 'none'
				});
				setTimeout(() => {
					lock = false;
				}, 1000);
			});
		}
	}
}
</script>

<style>
.plan-form {
	margin: 3vmin 0;
	width: 100%;
}

.plan-name-box, .plan-description, .plan-count {
	box-sizing: border-box;
	width: 100%;
	margin-top: 6vmin;
	font-size: 4.5vmin;
	padding: 3vmin;
	background-color: #eee;
	border-radius: 3vmin;
}

.plan-name-box, .plan-count {
	display: flex;
	align-items: center;
}

.text {
	margin-left: 0.25vmin;
}

.plan-name-box input {
	flex: 1;
	margin-right: 3vmin;
}

.plan-count input {
	flex: 1;
	margin-right: 3vmin;
}


.plan-description textarea {
	padding: 3vmin;
}

.bottom-btn {
	--h: 10vmin;
    width: 80vw;
    height: var(--h);
	position: fixed;
	left: 50%;
	bottom: 15vmin;
	transform: translateX(-50%);
    background: #07C160;
    color: #fff;
    border-radius: 4vmin;
	font-size: 4vmin;
    text-align: center;
    line-height: var(--h);
}
</style>
